<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="row" th:fragment="mark-process">
    <div class="col-lg-12">
        <div class="ibox ">
            <div class="ibox-title">
                <h5 >当前面试考生评分进度</h5>
                <span>【</span>第<label style="color: red" id="exameeId"></label>号考生<span>】</span>
                <span>【</span>倒计时<label class="label label label-info" style="font-size: large" id="countdown">8:00</label><span>】</span>

<!--                <span class="label label-danger" style="font-size: large">0.00</span>-->
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-wrench"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">

                <table class="table table-bordered" id="table_scoreProcess">

                </table>

            </div>
        </div>
    </div>


    <script>

        let endTImeFront=null;
        $(document).ready(function () {
            getCurrentInterviewingExameeDrawLot();
            buildCurrentExaminerMarkProcessTable();

            $.ajax({
                url:"/markProcess/timeStart",
                type:"POST",
                success:function (result) {
                    const endTime=result.data.endTime;
                    endTImeFront=endTime;
                    updateCountdown();
                    setInterval(updateCountdown, 1000);
                }
            })
            var countdownElement = document.getElementById('countdown');
            function updateCountdown() {

                var now = new Date().getTime();
                var distance = endTImeFront - now;
                if (distance < 0) {
                    countdownElement.textContent = '考试时间到';
                } else {

                    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                    countdownElement.textContent =  minutes + '分钟 ' + seconds + '秒';
                }
            }

        });
        function getCurrentInterviewingExameeDrawLot(){
            $.ajax({
                url:"/markProcess/getCurrentInterviewingExameeDrawLot",
                type:"POST",
                success:function (data){
                    $("#exameeId").text(data);
                }
            })
        }
        function buildCurrentExaminerMarkProcessTable(){
            var table_markProcess=$('#table_scoreProcess');
            $.ajax({
                url:"/markProcess/getExaminerMarkProcess",
                type: "POST",
                success:function (result) {
                    var markProcessData = result.data;
                    // 创建表头
                    var scoreProcess_thead = $("<thead></thead>");

                    var scoreProcessHeadTr = $("<tr></tr>");
                    $.each(markProcessData,function (i,item) {
                        var headStr = "<th>" + i + "</th>";
                        scoreProcessHeadTr.append(headStr);
                    })

                    scoreProcess_thead.append(scoreProcessHeadTr);
                    table_markProcess.append(scoreProcess_thead);

                    //创建表格内容
                    var scoreProcess_tbody = $("<tbody></tbody>");
                    var scoreProcess_bodyTr = $("<tr></tr>");
                    $.each(markProcessData,function (i,item) {
                        var bodyStr;
                        if (item==0){
                            bodyStr = "<td style='color: red'>" + "未赋分" + "</td>";
                        }else if (item==1){
                            bodyStr = "<td style='color: green'>" + "已赋分" + "</td>";
                        }else{
                            bodyStr = "<td style='color: darkmagenta'>" + "错误" + "</td>";
                        }

                        scoreProcess_bodyTr.append(bodyStr);
                    })
                    scoreProcess_tbody.append(scoreProcess_bodyTr);
                    table_markProcess.append(scoreProcess_tbody);
                }
            })

        }
    </script>

</div>
</body>
</html>